//Take care of HTML Model Stuff here

function Model_init()
{
    Model_loadFromLocalStorage();
    Model_cleanup();
    //Initializing the area CSS-class ojects
    Model_populateDocumentInfo();
    Model_populateToolbar();
    Model_populateNotebooks();
    Model_populateMindMap();
    Model_populateNotePod();
    Model_populateBookmarks();
    Model_populateHelp();
    Model_addSaveNotice();
    Model_populateStatusBar();
    Model_createEndAdder();
}

function Model_loadFromLocalStorage(){
    if(!localStorage) return;
    var savedHTML = localStorage.getItem('memonaut');
    if(savedHTML)
        $('Scrapbook').innerHTML = savedHTML;
}

function Model_populateToolbar()
{
    $('Toolbar').innerHTML =
      '<img src="../app/res/button_document.png" onclick="newFile()" title="New Notebook">'+
      '<img src="../app/res/button_save.png" onclick="saveFile()" title="Save Notebook">'+
      '<img src="../app/res/button_memonaut.png" id="menuMemonaut" title="Note Menu">'+
      '<img src="../app/res/button_snapshot.png" onclick="exportView()" title="Export Snapshot View">'+
      '<img src="../app/res/button_settings.png" id="menuSettings" title="Settings Menu">'+
      '<img src="../app/res/help.png" height="32px" width="32px" onclick="toggleHelp();" title="Help">'
  ;
}

function Model_populateDocumentInfo()
{
    $('DocumentInfo').innerHTML =
      '<table><tr>'+
      '<td><img src="../app/res/memonaut.png" onclick="about();" style="float:right;"> </td>'+
      '<td>'+
        '<img src="../app/res/notebook.png" title="Double-click content to change filename">'+
        '<span id="DocFilename" class="field eip" style="overflow: hidden;">memonaut.html</span>'+
       '</td>'+
      '</tr></table>';
 }

function Model_populateStatusBar()
{
    $('Status').innerHTML = '<div id="StatusText" class="bar"><center>OK.</center></div>';
    $('StatusText').insert({before:'<a id="undeleter" onclick="Scrap_restore()">[ Undo Delete ]</a>'});
    $('undeleter').toggle();
    
}
function Model_populateNotebooks()
{
    var content = $('Notebooks').down('.areacontent');
    var barify = false;
    if(content)
        barify = content.hasClassName('barified');

    $('Notebooks').innerHTML =
      '<div class="areatitle" onclick="restoreArea(this)"><img src="../app/res/notebook.png" class="areatitle" title="Click to fold/expand"> Notebooks</div>' +
      '<div class="areacontent"><ol id="listNotebooks"></ol></div>';

  if(barify)
    barifyArea($('Notebooks').down('.areacontent')) ;
}

function Model_populateMindMap()
{
    var titlebar = $('MindMap').down('.areatitle');
    if(!titlebar){
        $('MindMap').insert({top:
                  '<div class="areatitle">'+
                  '<center>'+
                    '<img src="../app/res/jot.png" title="Double-click content to change title.">'+
                    '<span id="DocTitle" class="field eip" >Memonaut Untitled Notebook'+
                    '</span>'+
                  '</center>'+
                  '</div>'
        });
        titlebar = $('Bookmarks').down('.areatitle');
    }

    var button = titlebar.down('img');
    if(!button) {
        button = document.createElement('img');
        titlebar.insert({top:button});
    }
    
    button.setAttribute('src', gsResDir + 'jot.png');
    button.setAttribute('title', 'Click to fold/expand');

}

function Model_populateBookmarks()
{
    var titlebar = $('Bookmarks').down('.areatitle');
    if(!titlebar){
        $('Bookmarks').insert({top:
            '<div class="areatitle" onclick="restoreArea(this)">Bookmarks</div>'
        });
        titlebar = $('Bookmarks').down('.areatitle');
    }

    var button = titlebar.down('img');
    if(!button) { 
        button = document.createElement('img');
        titlebar.insert({top:button});
    }
    button.setAttribute('src', gsResDir + 'bookmark.png');
    button.setAttribute('title', 'Click to fold/expand');

    titlebar.setAttribute('onclick', 'restoreArea(this)');
}

function Model_populateNotePod()
{
    var content = $('NotePod').down('.areacontent');
    var barify = false;
    if(content)
        barify = content.hasClassName('barified');

    $('NotePod').innerHTML =
      '<div class="areatitle" onclick="restoreArea(this)"><img src="../app/res/wizard.png" title="Click to fold/expand"> NotePod </div>'+
      '<div class="areacontent">'+
      '<form id="formScrap"></form>'+
      '<br>'+
      '<span id="barNavigator"></span>' +
      '<span id="barQuickActions"></span>'+
      '</div>';

    $('formScrap').innerHTML =
        '<textarea class="" style="float: left;" id="textareaScrap" rows="4" cols="35" onclick="NotePod_onClick(this)">What\'s on your mind?</textarea>'+
        '<span id="NotePodLength" style="float:left; font-size:large;">0</span>'+
        '<input onclick="AddNote_onClick()" value="Add Note" style="clear:left; float: right;" type="button">'+
        '<select id="dropdownAddMode" style="clear: left; float: right;" onchange="changeAddMode(this)">'+
          '<option value="eCurrentScrapAfter" title="Hello">After Current Note</option>'+
          '<option value="eCurrentScrapInto">Under Current Note</option>'+
          '<option value="eCurrentScrapEdit">Edit Current Note</option>'+
          '<option value="eScrapbookTop">Notebook Top</option>'+
          '<option value="eScrapbookLast">Notebook Bottom</option>'+
        '</select>';

    $('barNavigator').innerHTML =
        '<img src="' + gsResDir +'nav_left.png" title="Out" onclick="CurrentScrap_moveOut()">' +
        '<img src="' + gsResDir +'nav_up.png" title="Up" onclick="CurrentScrap_moveUp()">' +
        '<img src="' + gsResDir +'nav_down.png" title="Down" onclick="CurrentScrap_moveDown()">' +
        '<img src="' + gsResDir +'nav_right.png" title="In" onclick="CurrentScrap_moveIn()">'+
        '<img src="' + gsResDir +'nav_prev.png" title="Previous" onclick="CurrentScrap_movePrevious()">'+
        '<img src="' + gsResDir +'nav_next.png" title="Next" onclick="CurrentScrap_moveNext()">';
    ;

    $('barQuickActions').innerHTML =
        '<img src="' + gsResDir +'nav_bold.gif" title="Bold" onclick="CurrentScrap_bold()">'+
        '<img src="' + gsResDir +'nav_italic.gif" title="Italics" onclick="CurrentScrap_italic()">'+
        '<img src="' + gsResDir +'nav_underline.gif" title="Underline" onclick="CurrentScrap_underline()">'+
        '<img src="' + gsResDir +'nav_strike.png" title="Strikethrough" onclick="CurrentScrap_strikethrough()">'+
        '<img src="' + gsResDir +'nav_format.png" title="Format Painter" onclick="FormatPainter_apply()">'+
        '<img src="' + gsResDir +'nav_pic.png" title="Icon" onclick="CurrentScrap_cycleIcon()">'+
        '<img src="' + gsResDir +'nav_numbering.gif" title="Numbering Style" onclick="CurrentScrap_numbering()">'+
        '<img src="' + gsResDir +'nav_list.gif" title="Fold/Expand" onclick="CurrentScrap_fold()">'+
        '<img src="' + gsResDir +'nav_indent.gif" title="Indent" onclick="CurrentScrap_shiftIntoPrevious()">'+
        '<img src="' + gsResDir +'nav_outdent.gif" title="Outdent" onclick="CurrentScrap_shiftOut()">'+
        '<img src="' + gsResDir +'nav_shuffle.png" title="Shuffle" onclick="CurrentScrap_shuffleParent()">'+
        '<img src="' + gsResDir +'nav_tweet.png" title="Tweet" onclick="CurrentScrap_tweet()">'+
        '<img src="' + gsResDir +'nav_info.png" title="Info" onclick="CurrentScrap_info()">';

    if(barify){
        barifyArea($('NotePod').down('.areacontent'));
    }

}

function Model_populateHelp()
{
    var content = $('Notebooks').down('.areacontent');
    var barify = false;
    if(content)
        barify = content.hasClassName('barified');

    $('Help').innerHTML =
          '<div class="areatitle" onclick="restoreArea(this)"><img src="../app/res/help.png" class="areatitle" title="Click to fold/expand"> Help</div>'+
            '<div class="areacontent" id="contentHelp" ></div>';
        
    $('contentHelp').innerHTML = '<iframe src="../app/res/help.html" scrolling="auto" frameborder=0 width="100%" height="100%"></iframe>';
    if(barify)
        barifyArea($('Help').down('.areacontent')) ;
}


function Model_addSaveNotice()
{
    var savenotice = document.createElement('span');
    savenotice.id = 'SaveNotice';
    $('DocFilename').insert({after:savenotice});

    if(!(Prototype.Browser.Gecko | Prototype.Browser.IE)){
       $('SaveNotice').insert({after:"<br>Save supported only for Firefox & Internet Explorer."});
    }
}

function Model_cleanup()
{
    $$('.commentlist').each(function (elmt){
            if(!elmt.getElementsByTagName('li').length)
                elmt.remove();
    });

    $$('.baractions').each(function (elmt){
                elmt.remove();
    });

    $$('.adder').each(function (elmt){
                elmt.remove();
    });

    var statusbar = $('Status');
    if(statusbar) $('Toolbar').insert({after:statusbar});
    
    var docinfo = $('DocumentInfo');
    if(docinfo) $('Toolbar').insert({after:docinfo});

    var savenotice = $('SaveNotice');
    if(savenotice) savenotice.remove();

}

function Model_createEndAdder(){
    var bar = document.createElement('span');
    bar.addClassName('adder');
    bar.addClassName('view');
    bar.observe('click',endAdder_addNote);

    $('Scrapbook').insert({after:bar});
    bar.insert({after:'<br>'}); //fix for Firefox scrollers appear on hover
}